<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      margin: 20px 200px; /*上下外边距，左右外边距*/
      width: 100px; /*宽度*/
      height: 100px; /*高度*/
      background: red; /*背景色*/
      border-top-right-radius: 50%; /*右上角圆角*/
      line-height: 100px; /*行高*/
      text-align: center; /*内容居中*/
    }

    .translate:hover {
      transform: translate(-50px, 50px); /*向左平移50px，向下平移50px*/
    }

    .scale:hover {
      transform: scale(2, 0.5); /*水平方向放大2倍，竖直方向放大0.5倍*/
    }

    .rotate:hover {
      transform: rotate(45deg); /*顺时针旋转45度*/
    }

    .skew:hover {
      transform: skew(-45deg); /*逆时针倾斜45度*/
    }

    .origin:hover {
      transform-origin: 50px 50px; /*向左平移50px，向下平移50px*/
      transform: rotate(45deg); /*向左平移50px，向下平移50px*/
    }
  </style>
</head>
<body>
<div class="translate">平移</div>
<div class="scale">缩放</div>
<div class="rotate">旋转</div>
<div class="skew">倾斜</div>
<div class="origin">重设相对点</div>
</body>
</html>